<template>
  <el-dialog v-if="Ttype==2" width="80%" v-model="visible" @closed="onReset" append-to-body title="福娃AI报告详情" class="packageDialog">
    <!-- apm 查看页面 -->
    <div style="height:480px;overflow: auto;">
      <div>
        <el-button class="exportBtn" type="warning" @click="exportFun">导出</el-button>
        <div v-if="showReport" ref="sectionRef">
          <div class="report-table-info">
            <div class="t-name" v-for="(item, index) in reportInfo" :key="index">
              <div style="line-height: 50px;flex:4">{{ item.name }}</div>
              <div style="line-height: 50px;flex:6" v-if="item.name !=='综合健康得分'">{{ item.value }}</div>
              <div style="line-height: 50px;flex:6" v-if="item.name =='综合健康得分'" :class="getColorClass(item.value)">{{ item.value }}</div>
            </div>
          </div>
          <div class="report-common-title">亚健康及异常疾患风险指标</div>
          <div class="report-card-wrap">
            <el-card class="report-card" v-for="(item, index) in riskList" :key="index">
              <div class="report-card-title">{{ item?.title }}</div>
              <div v-for="(i, index) in (item?.projectList)" :key="index">⭐️{{ i }}</div>
              <div class="report-card-div2" v-for="(ii, index) in (item?.wordList)" :key="index">{{ ii }}</div>
            </el-card>
          </div>

          <div class="report-common-title">正常疾患风险指标</div>
          <div class="report-risk-wrap">
            <div class="report-risk" v-for="(item, index) in normalList" :key="index">
              <div class="risk-image"> 
                <img :src="item.icon" alt="">
              </div>
              <div class="risk-name">{{ item.title }}</div>
            </div>
          </div>

          <div class="report-common-title">AI解读</div>
          <div class="ai-content">
            <pre>{{ aiRemark }}</pre>
          </div>
          <div class="report-common-title">报告指标评估</div>
          <div class="report-target-wrap">
            <div class="report-target" v-for="(item, index) in categoryRespList" :key="index" @click="lookCategoryFun(item)">
              <div class="target-image">
                <img :src="item.icon" alt="">
              </div>
              <div class="target-name">
                <div>{{ item?.categoryName }}</div>
                <div :class="getColorClass(item?.score)">{{ item?.score }}</div>
              </div>
            </div>
          </div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item :title="`检查结果：${categorytitle}`" name="1">
              <el-table v-if="showTable" :data="tableData">
                <el-table-column v-for="(item, index) in tableHeader" :prop="item.prop" :key="index" :label="item.label" />
                <el-table-column  prop="projectValue" label="数值">
                  <template #default="{row}">
                    <span :class="getColorClass2(row.status )">{{ row.projectValue }}</span>
                </template>
                </el-table-column>
                <el-table-column width="50px" align="left">
                  <template #default="{ row }">
                    <el-icon style="cursor: pointer;" @click="openInfoPage(row)">
                      <Search />
                    </el-icon>
                  </template>
                </el-table-column>
              </el-table>
              <div v-else style="text-align: center;">暂无数据</div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer flex justify-center">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </template>
    <!-- 查看详情 （检查结果）-->
    <details-report ref="addOrUpdateRef" :dialogDatas="dialogDatas" />
  </el-dialog>
  <el-dialog v-if="Ttype==1" width="30%" v-model="visible" @closed="onReset" append-to-body title="手工报告" class="packageDialog">
    <!-- apm 查看页面 -->
    <div style="height:280px;overflow: auto;">
      <div style="font-size: 18px;color: #3f3f3f;">
        <p>报告名称：{{ title }}</p>
        <p>报告时间：{{ createTime }}</p>
        <p style="text-align: center;">
          <ul>
            <li v-for="(item,index) in urlList" :key="index" @click="lookReport(item)" style="cursor: pointer;display: inline-block;text-align: center;margin: 8px;">
              <!-- /Users/liumiaoyi/Desktop/workspace/font-fram/src/assets/image/Frame.png -->
              <img src="@/assets/image/Frame.png" alt="">
              <span style="font-size: 14px;">报告{{ index+1 }}</span>
            </li>
          </ul>
        </p>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer flex justify-center">
        <el-button @click="Offcheck">关闭</el-button>
      </span>
    </template>
    <!-- 查看详情 （检查结果）-->
    <details-report ref="addOrUpdateRef" :dialogDatas="dialogDatas" />
  </el-dialog>
</template>

<script lang="ts" setup>
// apm报告查看页面
import { ref, reactive, } from 'vue';
import { getInfoRequest, getCategoryRequest,exportRequest,projectRequest } from '@/api/APMReport';
import detailsReport from '@/views/APMReport/components/detail/index.vue';
import download from '@/utils/download';
const Ttype = ref();//1手工报告，2apm报告管理
interface User {
  rechargePoints: string;
  remainingPoints: string;
  remainingDate: string;
}
const tableHeader = reactive([
  { prop: 'projectName', label: '参数' },
  { prop: 'standard', label: '标准' },
  // { prop: 'projectValue', label: '数值' }
]);
let tableData = reactive([]);
const visible = ref(false);
const formRef = ref();
let dialogDatas = ref();
let currentId = ref()
const isCheck = ref(0)
//   当前选择的行的数据
const init = (data:any) => {
  currentId.value = data.datas.id
  isCheck.value = data.checked
  getInfoDatas()//报告详情
  if (data) dialogDatas.value = JSON.parse(JSON.stringify(data));
};
const onReset = () => {
  showTable.value = false
  console.log(showTable.value,"showTable.value")
  if (!formRef.value) return;
  formRef.value.resetFields();
  
};
const reportInfo = reactive([
  { name: '姓名', value: '' },
  { name: '综合健康得分', value: '' },
  { name: 'ID', value: '' },
  { name: '职业', value: '' },

  { name: '手机号码', value: '' },
  { name: '个性签名', value: '' },
  { name: '性别', value: '' },
  { name: '喜欢的分类', value: '' },

  { name: '生日', value: '' },
  { name: '注册时间', value: '' },
  { name: '城市', value: '' },
  { name: '用户来源', value: '' },
])
let riskList = reactive([])
let normalList = reactive([])
let aiRemark = ref('')
let categoryRespList = reactive([
  { icon: '', categoryName: '', score: 0 }
])//报告指标评估
// 手工报告字段
const title = ref('福娃AI报告详情');
const createTime = ref()//手工报告时间
const urlList = ref()//手工报告
/*报告详情 */
const showReport = ref(true)

const Offcheck = () =>{
  visible.value = false
  Ttype.value=''
}
const getInfoDatas = async () => {
  showReport.value = false
  let datas = { reportId: currentId.value, isCheck: (isCheck.value!==1) }
  const data: any = await getInfoRequest(datas);
  if (data.code === 2000) {
    visible.value = true;
    let result = data.data;
    // 手工报告
    Ttype.value = result.type;
    title.value = result.title;
    createTime.value = result?.createTime;
    if (result.urlList) {
      urlList.value = (result.urlList[0]).split(',');
    }
    // apm报告
    reportInfo[0].value = result.userName;
    reportInfo[1].value = result.score;
    reportInfo[2].value = result.userId;
    reportInfo[3].value = result.occupation;
    reportInfo[4].value = result.phone;
    // reportInfo[5].value = result.userName;
    reportInfo[6].value = result.gender;
    reportInfo[7].value = result?.fond;
    reportInfo[8].value = result.birthday;
    reportInfo[9].value = result.createTime;
    reportInfo[10].value = result.city;
    reportInfo[11].value = result?.userSource;
    riskList = result.risk.riskList;
    normalList = result.risk.normalList;
    aiRemark.value = result.aiRemark;
    categoryRespList = result.categoryRespList;
    showReport.value = true;
  } else {
    ElMessage.error(data.data.message)
  }
};
// 报告指标评估分类
const categorytitle = ref('')
const showTable = ref(false)
const lookCategoryFun = async (pra: any) => {
  categorytitle.value = pra.categoryName
  showTable.value = false
  let params = {
    reportId: currentId.value,
    categoryId: pra.reportCatId
  }
  const data: any = await getCategoryRequest(params);
  tableData = [...data.data.details] as any;
  showTable.value = true
}
// 查看分类详情 (相关)
const addOrUpdateRef = ref();
const openInfoPage = async (rowData: any) => {
  const data: any = await projectRequest({reportId:currentId.value,projectId:rowData.projectId});
  dialogDatas = {
    datas:data.data
  };
  onAddOrUpdate(dialogDatas);
}
const onAddOrUpdate = (data?: Recordable) => {
  addOrUpdateRef.value.init(data);
};
const sectionRef = ref()
const exportFun = async () => {//导出
  const data: any =  await exportRequest({reportId:currentId.value})
  download.pdf (data,'健康报告.pdf')
}
// 折叠面板
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
  console.log(val)
}
// 预览手工报告
const lookReport = (val:any) =>{
  window.open(val);
}
const getColorClass = (value:any) =>{
  if (value >= 80 && value <= 100) {
    return "green"; 
  } else if (value >= 60 && value <= 79) {
    return "yellow"; 
  } else {
    return "red"; 
  }
}
const getColorClass2 = (value:any) =>{
  if (value ===1) {
    return "blue"; 
  } else if (value ===2) {
    return "red";
  } else {
    return "gray"; 
  }
}

defineExpose({ init });
// onMounted(() => {
//   init();
// });
</script>

<style lang="scss" scoped>
.packageDialog {
  .exportBtn {
    position: absolute;
    top: 50px;
    right: 20px;
  }

  .report-table-info {
    width: 100%;
    border: 1px solid rgba(151, 151, 151, 0.5);
    display: flex;
    flex-wrap: wrap;

    .t-name {
      width: 25%;
      display: flex;
      border-bottom: 1px solid rgba(151, 151, 151, 0.5);

      div {
        flex: 1;
        text-align: center;
        line-height: 80px;
      }

      div:first-child {
        background: #eee;
        color: #3f3f3f;
      }
    }
  }

  .report-common-title {
    font-size: 18px;
    color: #323332;
    margin: 25px 0;
  }

  .report-card-wrap {
    display: flex;
    flex-wrap: wrap;

    //  风险指标
    .report-card {
      // width: 50%;
      // text-align: center;
      // margin-right: 2%;
      // border: 1px solid red;
      width: 48%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      margin-right: 2%;

      .report-card-title {
        font-size: 20px;
        color: #ff2626;
        font-weight: 500;
      }

      .report-card-div2 {
        display: inline-flex;
        align-items: center;
        background: #ffc200;
        margin-right: 5px;
        padding: 2px 5px;
        border-radius: 2px;
      }
    }
  }

  .ai-content {
    padding: 10px;
    border: 1px solid rgba(151, 151, 151, 0.5);
    padding-right: 188px;
    pre{
      white-space:pre-wrap;
    }
  }

  .report-target-wrap {
    display: flex;
    flex-wrap: wrap;

    .report-target {
      width: 25%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      cursor: pointer;
      .target-image {
        min-width: 80px;
        min-height: 80px;
        margin-right: 15px;
        img{
          min-width: 75px;
          min-height: 75px;
          background-size: 100%;
        }
      }

      .target-name {
        line-height: 26px;
        min-width: 177px;
        div:first-child {
          font-size: 16px;
        }

        div:last-child {
          font-size: 18px;
          font-weight: 500;
          // color: red;
        }
      }
    }
  }

  // 正常疾患风险指标
  .report-risk-wrap {
    display: flex;
    flex-wrap: wrap;

    .report-risk {
      width: 25%;
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .risk-image {
        min-width: 80px;
        min-height: 80px;
        // border: 1px solid red;
        margin-right: 15px;
        img{
          min-width: 75px;
          min-height: 75px;
          background-size: 100%;
        }
      }
      .risk-name{
        min-width: 177px;
      }
    }
  }
}
.green {
  color: #04AC00;
}

.yellow {
  color: #ffc200;
}

.red {
  color: #FF1C1C;
}
.blue{
  color: #386BDF;
}
.gray{
  color: #979797;
}
</style>
